import { useIntersectionObserver } from '@vueuse/core'

// 定义图片懒加载插件
export const lazyPlugin = {
    install(app){
        // (感觉一开始已经请求接口了呢，后赋值图片而已)
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el: 指令绑定的元素
                // binding: 绑定的表达式的值
                const {stop} = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    // useIntersectionObserver 判断是否在视图窗口
                    if (isIntersecting) {
                        // 进入视口区域，加载图片（给src赋值）
                        el.src = binding.value
                        // 第一次加载后停止（自带的停止方法），节约性能
                        stop()
                    }
                })
            }
        })
    }
}



